<template>
  <div class="table-main">
    <el-dialog
      :close-on-click-modal="false"
      @close="handMyClose"
      :append-to-body="true"
      title="发放优惠券"
      :visible.sync="dialogVisible1"
      width="60%"
    >
      <div class="form_box">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="发放数量:" prop="num">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-input-number v-model="form.num" @change="handleChange" :min="1"></el-input-number>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="过期时间:" prop="endTime">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-date-picker
                  v-model="form.endTime"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                ></el-date-picker>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="value2">
            <div>
              <el-transfer
                filterable
                :filter-method="filterMethod"
                filter-placeholder="请输入内容搜索"
                v-model="value2"
                :data="userList"
              ></el-transfer>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handSub('form')" :loading="bntLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SidebarLogo',
  components: {},
  watch: {},
  props: {
    id: {
      type: [Number, String]
    }
  },
  data() {
    return {
      bntLoading: false,
      dialogVisible1: false,
      userList: [],
      value2: [],
      rules: {
        wxuserid: [
          { required: true, type: 'array', message: '请选择发放的用户' }
        ],
        num: [{ required: true, message: '选输入发放数量' }],
        endTime: [{ required: true, message: '请选择过期时间' }]
      },
      form: {},
      filterMethod(query, item) {
        let newData
        if (item.label != null) {
          newData = item.label.indexOf(query) > -1
        }

        return newData
      }
    }
  },
  async mounted() {
    let newUserList = (await this.$api.findlist()).data.data
    let newArr = []
    newUserList.forEach(item => {
      newArr.push({
        label: item.nickName,
        key: item.id
      })
    })
    this.userList = newArr
    console.log(this.userList)
  },
  methods: {
    handleChange() {},
    handSub(formName) {
      if (this.value2.length != 0) {
        this.form.wxuserid = this.value2.join(',')
      }
      console.log(this.form)
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.bntLoading = true
          // this.form.wxuserid = this.form.wxuserid.join(',')
          this.form.couponId = this.id
          try {
            let newData = await this.$api.addCouponWxuser(this.form)
            this.dialogVisible1 = false
            this.bntLoading = false
            this.$parent.init()
            this.$message({
              message: newData.data.message,
              type: 'success'
            })
          } catch (error) {
            this.bntLoading = false
          }
        } else {
          console.log('error submit!!')
          this.$message({
            message: '请完成表单录入'
          })
          return false
        }
      })
    },
    handMyClose() {
      this.dialogVisible1 = false
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.map_btn {
  width: 82px;
  height: 22px;
  background: rgba(56, 173, 147, 1);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  margin-top: 8px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.form_box {
  // width: 80%;
  margin: 0 auto;
  margin-top: 30px;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #38ad93;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #38ad93;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
